
<template>


<div class="app-container">


  <h2 style="text-align: center;">发布新课程</h2>


  <el-steps :active="1" process-status="wait" align-center style="margin-bottom: 40px;">

    <el-step title="填写课程基本信息"/>

    <el-step title="创建课程大纲"/>

    <el-step title="发布课程"/>

  </el-steps>
<el-form label-width="120px">


<el-form-item label="课程标题">

  <el-input v-model="courseInfo.title" placeholder=" 示例：机器学习项目课：从基础到搭建项目视频课程。专业名称注意大小写"/>

</el-form-item>


<!-- 所属分类 TODO -->
<el-form-item label="课程分类">

<el-select

  v-model="courseInfo.subjectParentId"

  placeholder="一级分类" @change="showTwoSbuject">

  <el-option

    v-for="course in courseOneList"

    :key="course.id"

    :label="course.title"

    :value="course.id"/>

</el-select>

<el-select

  v-model="courseInfo.subjectId"

  placeholder="二级分类">

  <el-option

    v-for="coursetwo in courseTwoList"

    :key="coursetwo.id"

    :label="coursetwo.title"

    :value="coursetwo.id"/>

</el-select>

</el-form-item>

<!-- 课程讲师 TODO -->
<el-form-item label="课程讲师">

<el-select

  v-model="courseInfo.teacherId"

  placeholder="请选择">

  <el-option

    v-for="teacher in teacherList"

    :key="teacher.id"

    :label="teacher.name"

    :value="teacher.id"/>

</el-select>

</el-form-item>

<el-form-item label="总课时">

  <el-input-number :min="0" v-model="courseInfo.lessonNum" controls-position="right" placeholder="请填写课程的总课时数"/>

</el-form-item>


<!-- 课程简介 TODO -->
<el-form-item label="课程简介">
    <tinymce :height="300" v-model="courseInfo.description"/>
</el-form-item>

<!-- 课程封面 TODO -->
<el-form-item label="课程封面">


<el-upload

  :show-file-list="false"

  :on-success="handleAvatarSuccess"

  :before-upload="beforeAvatarUpload"

  :action="BASE_API+'/eduoss/fileoss/upload'"

  class="avatar-uploader">

  <img :src="courseInfo.cover">

</el-upload>


</el-form-item>

<el-form-item label="课程价格">

  <el-input-number :min="0" v-model="courseInfo.price" controls-position="right" placeholder="免费课程请设置为0元"/> 元

</el-form-item>

</el-form>

  <el-form label-width="120px">


    <el-form-item>

      <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存并下一步</el-button>

    </el-form-item>

  </el-form>

</div>

</template>
<script>
import course from '@/api/edu/course'
import subject from '@/api/edu/subject'
import Tinymce from '@/components/Tinymce'
export default {
    components: { Tinymce },
    data(){
        return{
            saveBtnDisabled: false,
            courseInfo:{
                title: '',
                subjectId: '',
                subjectParentId:'',
                teacherId: '',
                lessonNum: 0,
                description: '',
                cover: '/static/1.jpg',
                price: 0
            },
            courseId:'',
            BASE_API: process.env.BASE_API,
            teacherList: [],
            courseOneList: [],
            courseTwoList: []
        }
    },
    created(){

        this.init()
        
    },
        watch: {
        $route(from) {

        console.log('watch $route')

        this.init()

        }

  },
    methods:{
        init(){
            if (this.$route.params && this.$route.params.id){
            this.courseId=this.$route.params.id
            this.getCourseInfo()
        }else{
                this.courseInfo.title=''
                this.courseInfo.subjectId=''
                this.courseInfo.subjectParentId=''
                this.courseInfo.teacherId=''
                this.courseInfo.description=''
            this.getAllTeacher()
            this.getOneCourse()
            
        }
        },
        getCourseInfo(){
            course.getCourseInfo(this.courseId)
            .then(response => {
                this.courseInfo = response.data.courseInfo
                subject.getSubjectList()
                .then (responseSbuject => {
                    this.courseOneList = responseSbuject.data.list
                    for(var i=0;i<this.courseOneList.length;i++){
                        var subjectOne=this.courseOneList[i]
                        console.log(subjectOne)
                        if(this.courseInfo.subjectParentId==subjectOne.id){
                            this.courseTwoList=subjectOne.children
                            console.log(this.courseTwoList)
                        }
                    }
                    this.getAllTeacher()
                })
            })
        },
        handleAvatarSuccess(res,file){
            this.courseInfo.cover=res.data.url
        },
        beforeAvatarUpload(file){                        
            const isJPG = file.type === 'image/jpeg'
            const isLt2M = file.size / 1024 / 1024 < 2
            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!')
            }
            if (!isLt2M) {          
                this.$message.error('上传头像图片大小不能超过 2MB!')

            }

            return isJPG && isLt2M
        },
        showTwoSbuject(value){
            //console.log(value)
            for(var i=0;i<this.courseOneList.length;i++){
                //alert(this.courseOneList[i])
                var subjectOne=this.courseOneList[i]
                if(value===subjectOne.id){
                    this.courseTwoList=subjectOne.children
                    this.courseInfo.subjectId=''
                }
            }
        },
        getOneCourse(){
            subject.getSubjectList().then(response=>{
                
                this.courseOneList=response.data.list
                //console.log(this.courseOneList)
            })
        },
        getAllTeacher(){
            course.getAllTeacher().then(response=>{
                this.teacherList=response.data.items
            })
        },
        addCourseInfo(){
            course.saveCourseInfo(this.courseInfo).then(response=>{
                this.$message({
                type: 'success',
                message: '添加课程信息成功'             
                })
            this.$router.push({path:'/course/chapter/'+response.data.courseId})
            })
        },
        updateCourseInfo(){
            course.updateCourseInfo(this.courseInfo).then(response=>{
                this.$message({
                type: 'success',
                message: '修改课程信息成功'               
            })
            this.$router.push({path:'/course/chapter/'+response.data.courseId})
            })
        },
        saveOrUpdate(){
            if(!this.courseInfo.id){
                this.addCourseInfo()
            }else{
                this.updateCourseInfo()
            }
            
        }
    }
}
</script>
<style scoped>
.tinymce-container {
  line-height: 29px;

}
</style>